<template>
  <q-page class="q-pa-sm" style="min-height: 100%">
    <div class="row">
      <div>Rooms</div>
      <q-space></q-space>
      <q-btn dense flat icon="mdi-menu" padding="none" size="12px">
        <q-menu class="shadow-5" content-class="bg-black text-white">
          <q-list dense style="min-width: 168px;font-size:12px">
            <div class="row">
              <q-space />
              <div style="font-size:9px;line-height: 12px">Art talk for everyone</div>
            </div>
            <q-separator />
            <q-item clickable v-close-popup>
              <q-item-section
                avatar
                style="min-width: 20px;padding-right:6px!important"
              >
                <q-icon name="mdi-bug" size="18px"></q-icon>
              </q-item-section>
              <q-item-section>Feedback/Bug Report</q-item-section>
            </q-item>
          </q-list>
        </q-menu>
      </q-btn>
    </div>
    <div class="column justify-center items-center q-px-xl q-py-md no-warp">
      <div class="row justify-around no-warp q-my-sm" style="width:70%">
        <q-btn
          flat
          icon="mdi-format-list-bulleted-square"
          :text-color="currentView=='room'?'white':'dark'"
          @click="changeView('room')"
        />
        <q-btn
          flat
          icon="mdi-plus"
          :text-color="currentView=='create'?'white':'dark'"
          @click="changeView('create')"
        ></q-btn>
        <q-btn flat icon="mdi-compass" :disable="true" text-color="dark"></q-btn>
      </div>
    </div>
    <q-tab-panels
      class="q-px-xl"
      v-model="currentView"
      style="background-color:transparent;"
      animated
    >
      <q-tab-panel name="room" style="padding:0px">
        <q-img
          class="q-my-sm"
          :src="room.banner"
          style="height: 76px"
          v-for="room in rooms"
          :key="room.banner"
          @click="gotoRoom(room)"
        >
          <div class="absolute-bottom text-left banner-title">{{room.name}}</div>
        </q-img>
      </q-tab-panel>
      <q-tab-panel name="create" style="padding:0px">
        <div class="column">
          <q-input filled label="Enter an invite link" clearable></q-input>
          <q-btn color="blue-grey-8">JOIN</q-btn>
          <div class="invite-text q-my-md">- OR -</div>
          <q-btn color="primary" @click="showCreateRoom">CREATEA A ROOM</q-btn>
        </div>
      </q-tab-panel>
    </q-tab-panels>
    <q-dialog v-model="showCreateRoomDialog">
      <q-card>
        <q-bar></q-bar>
      </q-card>
    </q-dialog>
  </q-page>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';

@Component({})
export default class Room extends Vue {
  private currentView = 'room';
  private showCreateRoomDialog = false;
  private rooms = [
    {
      name: 'Art talk for everyone',
      banner: 'static/pngs/Path1578.png',
    },
    {
      name: 'All about anatomy',
      banner: 'static/pngs/Path1579.png',
    },
    {
      name: 'Digital Painting Tutorials',
      banner: 'static/pngs/Path1580.png',
    },
  ];

  changeView(name: string) {
    this.currentView = name;
  }

  gotoRoom(room: any) {
    console.log(room);
  }

  showCreateRoom() {
    this.showCreateRoomDialog = true;
  }
}
</script>
<style lang="stylus" scoped>
.banner-title {
  line-height: 30px;
  padding: 0px 20px;
  background-color: #383F45;
  font-size: 12px;
}

.invite-text {
  color: #7F8790;
  text-align: center;
}
</style>
